<template>
  <div>
    <h2 style="margin:0px;">客户备注</h2>
    <el-input type="textarea" :rows="2" disabled v-model="textarea"></el-input>
    <h2 style="margin:0px">商家回复</h2>
    <el-input type="textarea" :rows="2" v-model="sellerRemack"></el-input>
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column prop="user" label="姓名" width="180"></el-table-column>
      <el-table-column prop="name" label="商品" width="180"></el-table-column>
      <el-table-column prop="number" label="数量" width="180"></el-table-column>
      <el-table-column prop="price" label="单价" width="180"></el-table-column>
      <el-table-column prop="total" label="总价" width="180"></el-table-column>
      <el-table-column prop="_id" label="操作" @cell-click="delentOneGood">
        <template slot-scope="scope">
        <el-button
          size="mini"
          icon="el-icon-edit"
          type="primary"
          circle
          @click=" openMoTai(scope.$index, scope.row)"></el-button>

    <el-dialog title="修改前请与卖家协商" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input style="width:217px" v-model=" goodsNumArr[form.index]" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-select v-model="tableData[form.index]._id" placeholder="请选择">
            <el-option 
            v-for="(item,index) in  allGoodsData" 
            :key="index" 
            :label="item.name"
            :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOneGood(scope.$index, scope.row)">确 定</el-button>
      </div>
    </el-dialog>
        <el-button
          style="margin-left:20px"
          size="mini"
          icon="el-icon-delete"
          type="danger"
          circle
          @click="delentOneGood(scope.$index, scope.row)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-button type round @click="backUsersList">返回订单</el-button>
      <el-button type="danger" round @click="sourSend">确定发货</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.getOrderGoods()
    this.getAllGoods()
  },
  data() {
    return {
      tableData: [],
      goodsListArr:[],
      allGoodsData:[],
      goodsNumArr:[],
      textarea: "",
      sellerRemack: "",
      time:"",
      isSend: "",
     dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          index: '0',
          desc: ''
        },
        formLabelWidth: '120px'
    };
  },
  watch: {
  },
  methods: {
    getAllGoods(){
        axios
          .get("/goods/getGoods")
          .then(res => {
            this.allGoodsData = res.data.goodsData
          });
      },
    delentOneGood(index, row){
      this.goodsListArr.splice(index,1)
      this.goodsNumArr.splice(index,1)
      const goodId = this.goodsListArr
      const _id = this.$route.query._id
      const number = this.goodsNumArr
      this.updateOrderGoods({_id,goodId,number},this.getOrderGoods)
    },
    updateOrderGoods(data,next){
          axios
          .post("/orderForms",data)
          .then(res => {
            next()
          });
    },
    getOrderGoods(){
      axios
      .get("/orderForms", { params: { _id: this.$route.query._id } })
      .then(res => {
        let count = 1;
        res.data.oneData[0].goodId
          .map((item, index) => {
            item.number = res.data.oneData[0].number[index];
            item.total = item.number * item.price;
            item.user = res.data.oneData[0].userId.name;
            item.count = count++;
          })
          .join();
        this.tableData = res.data.oneData[0].goodId;
        this.textarea = res.data.oneData[0].remack;
        this.sellerRemack = res.data.oneData[0].sellerRemack;
        this.isSend = res.data.oneData[0].isSend;
        this.time = res.data.oneData[0].time;
        this.goodsListArr = res.data.data[0].goodId;
        this.goodsNumArr = res.data.data[0].number;
      });
    },
    backUsersList() {
      this.$router.push("/orderformUsersList");
    },
    sourSend() {
      if (this.isSend == "0") {
        const _id = this.$route.query._id
        const isSend="1"
        const sellerRemack= this.sellerRemack
        this.updateOrderGoods({_id,isSend,sellerRemack},this.backUsersList)
      } else if (this.isSend == "1") {
        const _id = this.$route.query._id
        const sellerRemack= this.sellerRemack
        this.updateOrderGoods({_id,sellerRemack},this.backUsersList)
      } else {
        this.backUsersList()
      }
    },
    updateOneGood(index, row){
      this.dialogFormVisible = false
      this. goodsListArr[this.form.index]=this.tableData[this.form.index]._id
      const _id = this.$route.query._id
      let number = this. goodsNumArr
      const goodId =  this. goodsListArr
      this.updateOrderGoods({_id,number,goodId},this.getOrderGoods)
    },
    openMoTai(index, row){
      this.form.index = index
      this.dialogFormVisible = true
    }

  }
};
</script>